<template>
	<view class="acc-page">
		<view class="acc-wp">
			<form class="acc-form">
				<view class="acc-view">
					<label>
						<text>*</text>
						绑定手机号
					</label>
					<input type="text" placeholder="请输入手机号" class="acc-inp" v-model="val1"/>
				</view>
				<view class="acc-view">
					<label>
						<text>*</text>
						绑定微信号
					</label>
					<input type="text" placeholder="请输入微信号" class="acc-inp" v-model="val2"/>
				</view>
				<view class="acc-view">
					<label>
						<text>*</text>
						确认微信号
					</label>
					<input type="text" placeholder="请确认微信号" class="acc-inp" v-model="val3"/>
				</view>
				<view class="acc-view">
					<label>输入验证码</label>
					<input type="text" placeholder="请输入验证码" class="acc-in" v-model="val4"/>
					<button class="acc-but" @click="getcode()">发送短信</button>
				</view>
				<button form-type="submit" class="acc-buts" @click="postPhone()">提交</button>
			</form>
		</view>
	</view>
</template>

<script>
import url from '../../components/hosturl.js'
export default {
	data() {
		return {
			val1:'',
			val2:'',
			val3:'',
			val4:''
		};
	},
	onLoad() {
		uni.setNavigationBarTitle({
			title: '账号安全'
		});
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: '#a286eb'
		});
	},
	methods: {
		getcode(){
			let _this = this;
			if (!(/^1[3456789]\d{9}$/.test(this.val1))){
			//如果不是电话号码...（能识别位数、开头是否符合）
			     uni.showModal({
			     	title:'手机号错误,请重新输入'
			     })
			}else{
				 uni.request({
				 url:url+'/Me/getMsg',
				 data:{
					token: uni.getStorageSync('token'),
					phone: _this.val1
				 },
				 method:"GET",
				 success: (res) => {
					uni.showToast({
						title:'发送成功',
						duration: 2000
					})
				 }
			   })
			}
		},
		postPhone(){
			let _this = this;
			if (_this.val1==''){
			     uni.showModal({
			     	title:'请填入手机号'
			     })
				 return ;
			}
			if (!(/^1[3456789]\d{9}$/.test(_this.val1))){
			//如果不是电话号码...（能识别位数、开头是否符合）
			     uni.showModal({
			     	title:'手机号错误,请重新输入'
			     })
				 return ;
			}
			if (_this.val2==''){
			     uni.showModal({
			     	title:'请填入绑定微信号'
			     })
				 return ;
			}
			if (_this.val3==''){
			     uni.showModal({
			     	title:'请填入确认微信号'
			     })
				 return ;
			}
			if (_this.val2!=_this.val3){
			     uni.showModal({
			     	title:'微信号不一致，请重新输入'
			     })
				 return ;
			}
			if (_this.val4==''){
			     uni.showModal({
			     	title:'请填入验证码'
			     })
				 return ;
			}
			uni.request({
				url:url+'/Me/ChangeUser',
				data:{
					token: uni.getStorageSync('token'),
					phone: _this.val1,
					wxh:_this.val2,
					wxhTwo:_this.val3,
					code:_this.val4,
				},
				method:"POST",
				header: {
				    "Content-Type": "application/x-www-form-urlencoded"
				},
				success: (res) => {
					if(res.data.msg=='两次绑定微信号不一致'){
						uni.showModal({
							title:'微信号不一致,请重新输入'
						})
					}
					if(res.data.msg=='验证码已失效。请重新获取'){
						uni.showModal({
							title:'验证码已失效,请重新获取'
						})
					}
					if(res.data.msg=='验证码错误'){
						uni.showModal({
							title:'验证码错误,请重新输入'
						})
					}
					if(res.data.msg=='设置成功'){
						uni.showToast({
							title:' 设置成功',
							duration: 2000,
							success() {
								
								setTimeout(function(){
									
									uni.navigateBack({ delta: 1});
								},2000);
							}
						})
					}
				}
			})
		}
	}
};
</script>

<style>
.acc-page {width: 100%;}
.acc-wp {width: 94%;margin-left: 3%;}
.acc-form {flex-wrap: wrap;}
.acc-view{border-bottom: 1rpx #D6D6D6 solid;width: 100%;height: 110rpx;font-size: 28rpx;display: flex;justify-content: space-between;}
.acc-view label{margin: auto 0;}
.acc-view text{color: #a387eb;}
.acc-inp{width: 70%;margin: auto 0;}
.acc-in{width: 30%;margin: auto 0;}
.acc-but{background-color: #a286eb;margin: auto 0;color: #FFFFFF;border: none;border-radius: 10px;}
.acc-buts{background-color: #a286eb;margin-top: 78%;color: #FFFFFF;}
</style>
